<template>
  <div class="salary-detail">
    <el-row id="pieChart" type="flex" justify="space-around">
      <el-col :span="8">
        <div id="insurance" style="width: 100%; height: 100%;" />
      </el-col>
      <el-col :span="8">
        <div id="allowance" style="width: 100%; height: 100%;" />
      </el-col>
      <el-col :span="8">
        <div id="charge" style="width: 100%; height: 100%;" />
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 100%; align-content: center;"
    >
      <el-table-column :label="$t('salary.detail.tableTitle')" header-align="center">
        <el-table-column
          fixed
          prop="name"
          :label="$t('salary.detail.tableName')"
          min-width="1"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="date"
          :label="$t('salary.detail.tableDate')"
          min-width="1"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="data"
          :label="$t('salary.detail.tableData')"
          min-width="1"
          header-align="center"
          align="center"
        />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getAllowanceList, getChargeList, getInsuranceList } from '@/api/user'

export default {
  name: 'SalaryDetail',
  data() {
    return {
      tableData: [{
        name: '',
        date: '',
        data: ''
      }],
      insurance: '',
      opinion1: ['养老', '医疗', '失业', '工伤', '生育', '公积金'],
      opinionData1: [
        { value: 13, name: '养老', itemStyle: 'red' },
        { value: 19, name: '医疗', itemStyle: 'lightred' },
        { value: 21, name: '失业', itemStyle: 'yellow' },
        { value: 42, name: '工伤', itemStyle: '#1ab394' },
        { value: 31, name: '生育', itemStyle: 'arial' },
        { value: 31, name: '公积金', itemStyle: 'lightgreen' }
      ],
      allowance: '',
      opinion2: ['加班补贴', '餐补', '交通补贴', '住房补贴'],
      opinionData2: [
        { value: 13, name: '加班补贴', itemStyle: 'red' },
        { value: 19, name: '餐补', itemStyle: 'lightred' },
        { value: 21, name: '交通补贴', itemStyle: 'yellow' },
        { value: 42, name: '住房补贴', itemStyle: '#1ab394' }
      ],
      charge: '',
      opinion3: ['缺勤扣款', '迟到扣款'],
      opinionData3: [
        { value: 13, name: '缺勤扣款', itemStyle: 'red' },
        { value: 19, name: '迟到扣款', itemStyle: 'lightred' }
      ]
    }
  },
  mounted() {
    this.initPieData()
    this.initTableData()
    this.selfAdaption()
  },
  methods: {
    drawPieChart1() {
      // 初始化 echarts 实例
      this.insurance = echarts.init(document.getElementById('insurance'))
      // 绘制图表
      this.insurance.setOption({
        title: {
          text: '',
          subtext: '五险一金',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinion1
        },
        series: [
          {
            name: '五险一金金额',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData1,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function(params) {
                // 自定义颜色
                const colorList = ['#32DADD', '#C8B2F4', '#5AB1EF', '#FFB980', '#D87A80', '#63C2FF']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    },
    drawPieChart2() {
      // 初始化 echarts 实例
      this.insurance = echarts.init(document.getElementById('allowance'))
      // 绘制图表
      this.insurance.setOption({
        title: {
          text: '',
          subtext: '补贴金额',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinion2
        },
        series: [
          {
            name: '补贴金额',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData2,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function(params) {
                // 自定义颜色
                const colorList = ['#32DADD', '#C8B2F4', '#5AB1EF', '#FFB980']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    },
    drawPieChart3() {
      // 初始化 echarts 实例
      this.insurance = echarts.init(document.getElementById('charge'))
      // 绘制图表
      this.insurance.setOption({
        title: {
          text: '',
          subtext: '扣款金额',
          x: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: 'bottom',
          data: this.opinion3
        },
        series: [
          {
            name: '扣款金额',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData3,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function(params) {
                // 自定义颜色
                const colorList = ['#32DADD', '#C8B2F4']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    },
    initPieData() {
      const id = this.$route.query.id
      getInsuranceList(id).then(response => {
        const data = response.data
        if (data) {
          console.log(data)
          // 顺序：'养老', '医疗', '失业', '工伤', '生育', '公积金'
          // endowment: 1076.53, medical: 153.79, unemployment: 153.79, injury: 0, maternity: 0, fund: 384.48
          this.opinionData1[0].value = data.endowment
          this.opinionData1[1].value = data.medical
          this.opinionData1[2].value = data.unemployment
          this.opinionData1[3].value = data.injury
          this.opinionData1[4].value = data.maternity
          this.opinionData1[5].value = data.fund
          const pieChart = document.getElementById('pieChart')
          pieChart.style.height = document.documentElement.clientHeight * 0.5 + 'px'
          this.drawPieChart1()
        } else {
          this.opinionData1 = []
        }
      })
      getAllowanceList(id).then(response => {
        const data = response.data
        if (data) {
          console.log(data)
          // 顺序：'加班补贴', '餐补', '交通补贴', '住房补贴'
          // overtime: 1930.53, meal: 302.22, transport: 245.92, housing: 963.46
          this.opinionData2[0].value = data.overtime
          this.opinionData2[1].value = data.meal
          this.opinionData2[2].value = data.transport
          this.opinionData2[3].value = data.housing
          const pieChart = document.getElementById('pieChart')
          pieChart.style.height = document.documentElement.clientHeight * 0.5 + 'px'
          this.drawPieChart2()
        } else {
          this.opinionData2 = []
        }
      })
      getChargeList(id).then(response => {
        const data = response.data
        if (data) {
          console.log(data)
          // 顺序：'缺勤扣款', '迟到扣款'
          // absent: 349.64, late: 233.51
          this.opinionData3[0].value = data.absent
          this.opinionData3[1].value = data.late
          const pieChart = document.getElementById('pieChart')
          pieChart.style.height = document.documentElement.clientHeight * 0.5 + 'px'
          this.drawPieChart3()
        } else {
          this.opinionData3 = []
        }
      })
    },
    initTableData() {

    },
    selfAdaption: function selfAdaption() {
      // 实现自适应
      const _this = this
      const insuranceTemp = document.getElementById('insurance')
      const allowanceTemp = document.getElementById('allowance')
      const chargeTemp = document.getElementById('charge')
      if (!insuranceTemp || !allowanceTemp || !chargeTemp) {
        return false
      } else {
        setInterval(() => {
          window.onresize = function() {
            const pieChart = document.getElementById('pieChart')
            pieChart.style.height = document.documentElement.clientHeight * 0.5 + 'px'
            //  _this.chart = echarts.init(self.$refs.myEchart);
            _this.insurance = echarts.init(insuranceTemp)
            _this.insurance.resize()
            _this.allowance = echarts.init(allowanceTemp)
            _this.allowance.resize()
            _this.charge = echarts.init(chargeTemp)
            _this.charge.resize()
          }
        }, 1)
      }
      // 弃用方案，体验不佳
      // setInterval(() => {
      //   window.onresize = function () {
      //     // onresize 时要触发的函数，但是只能触发一次
      //     location.reload()
      //   }
      // }, 1)
    }
  }
}
</script>

<style>
#pieChart {
  margin-bottom: 20px;
  background-color: #fff;
}

.salary-detail {
  padding: 32px;
  line-height: 1.5;
  height: 100%;
}
</style>
